import React,{ Component } from "react"
import { Row, Col, Input, Button, Modal} from 'antd'
import api from '../../api/login'
import './login.less'
class PersonList extends Component{
    state = {
        isLogin: false
    }
	componentDidMount(){
	}
	login = () => {
        let user_name = this.refs.name.input.value.replace(/\s+/g,"")
        let Password = this.refs.password.input.value
        if (!user_name || !Password) {
            Modal.warning({
                title: '提示',
                content: '用户名或者密码不能为空',
            })
            return
        }
        let query = {
            user_name: user_name,
            password: Password
        }
        api.doLogin(query).then(res => {
            if (res.error === 0) {
                sessionStorage.setItem("token",res.data.token)
                sessionStorage.setItem("user_name",res.data.user_info.user_name)
                window.location.href = '/person/list'
            } else {
                Modal.warning({
                    title: '提示',
                    content: res.msg || '登录失败，请稍后重试',
                })
            }
        })
    }
    handleKeydown = (e) => {
        if (e.which !== 13) return
        this.login()
    }
	render(){
		return(
			<div>
                <div className="login-container">
                    <div className='title'>射洪街平台管理系统</div>
                    <Row>
                        <Col span={4}>用户名:</Col>
                        <Col span={18} offset={1}><Input ref="name" onKeyPress={(e)=>{this.handleKeydown(e)}}/></Col>
                    </Row>
                    <Row>
                        <Col span={4}>密码:</Col>
                        <Col span={18} offset={1}><Input type="password" ref="password" onKeyPress={(e)=>{this.handleKeydown(e)}}/></Col>
                    </Row>
                    <Row>
                        <Col span={23} style={{textAlign: 'center'}}><Button type="primary" onClick={() => this.login()}>提交</Button></Col>
                    </Row>
                </div>
			</div>
		)
	}
}
export default PersonList;